<template>
  <div class="right-sub-content">
    <div class="row-box">
      <div class="mini-card-box">
        <div class="mini-card-item">
          <p class="title">
            <span class="title-block" style="background:#3EA2FE;"></span>一般公共预算收入
          </p>
          <div class="m-card-body">
            <div class="chart-box">
              <common-liquid-chart ref="publicLiquid" :config="publicLiquidConfig"></common-liquid-chart>
            </div>
            <p class="card-desc" style="color:#6BEEFF;">累计完成</p>
            <div class="desc-box desc-box-pubilc-income">
              <p class="txt">累积收入（万元）</p>
              <p class="num">{{publicLiquidConfig.sumIncome}}</p>
              <p class="txt">同比增长<span>{{publicLiquidConfig.incRate}}%</span></p>
            </div>
          </div>
        </div>
        <div class="mini-card-item">
          <p class="title">
            <span class="title-block" style="background:#6C43F7;"></span>政府性基金预算收入
          </p>
          <div class="m-card-body">
            <!-- <div class="chart-box">
              <common-liquid-chart ref="fundLiquid" :config="fundLiquidConfig"></common-liquid-chart>
            </div>
            <p class="card-desc" style="color:#6C43F7;">累计完成</p> -->
            <div class="desc-box">
              <p class="txt">本月收入（万元）</p>
              <p class="num">{{fundLiquidConfig.monthIncome}}</p>
              <p class="txt">上年同期<span>{{fundLiquidConfig.lastIncome}}万元</span></p>
            </div>
            <div class="desc-box">
              <p class="txt">累积收入（万元）</p>
              <p class="num">{{fundLiquidConfig.sumIncome}}</p>
              <p class="txt">同比增长<span>{{fundLiquidConfig.rate}}%</span></p>
            </div>
          </div>
        </div>
        <!-- <div class="mini-card-item">
          <p class="title">
            <span class="title-block" style="background:#EDA652;"></span>国有资本经营
          </p>
          <div class="m-card-body">
            <div class="chart-box">
              <common-liquid-chart ref="govLiquid" :config="govLiquidConfig"></common-liquid-chart>
            </div>
            <div class="desc-box">
              <p class="txt">累积收入（万元）</p>
              <p class="num">{{govLiquidConfig.sumIncome}}</p>
              <p class="txt">同比增长<span>{{govLiquidConfig.incRate}}%</span></p>
            </div>
          </div>
        </div> -->
        <!-- <div class="mini-card-item">
          <p class="title">
            <span class="title-block" style="background:#77F7E7;"></span>社保资金
          </p>
          <div class="m-card-body">
            <div class="chart-box">
              <common-liquid-chart ref="socialLiquid" :config="socialLiquidConfig"></common-liquid-chart>
            </div>
            <div class="desc-box">
              <p class="txt">累积收入（万元）</p>
              <p class="num">{{socialLiquidConfig.sumIncome}}</p>
              <p class="txt">同比增长<span>{{socialLiquidConfig.incRate}}%</span></p>
            </div>
          </div>
        </div> -->
      </div>
      <div class="card-item">
        <div class="card-title">
          收入结构
        </div>
        <div class="card-main">
          <common-pieNew-chart ref="incomePie" :config='incomePieConfig'></common-pieNew-chart>
        </div>
      </div>
    </div>

    <div class="income-box card-item">
      <div class="card-title">分月收入情况</div>
      <div class="income-main">
        <common-line-chart ref="incomeLine" :config="incomeLineConfig"></common-line-chart>
      </div>
    </div>
    <div class="row-box">
      <div class="card-item">
        <div class="card-title">
          政府性基金预算收入结构
        </div>
        <div class="card-main" style="height:374px;padding:0;">
            <common-table ref="govIncomeDetail" :config="govIncomeDetailConfig"></common-table>
        </div>
      </div>
      <div class="income-detail-box">
        <div class="detail-box">
          <p class="title">上划中央收入</p>
          <p class="total-txt">当月完成数（万元）</p>
          <p class="detail-num">65510</p>
          <p class="total-txt">上年同期（万元）</p>
          <p class="detail-num">57968</p>
          <p class="total-txt">同比(+-)&nbsp;<span>13.01%</span></p>
        </div>
        <div class="detail-box">
          <p class="title">上划省级收入</p>
          <p class="total-txt">当月完成数（万元）</p>
          <p class="detail-num">38951</p>
          <p class="total-txt">上年同期（万元）</p>
          <p class="detail-num">33672</p>
          <p class="total-txt">同比(+-)&nbsp;<span>15.67%</span></p>
        </div>
        <div class="detail-box">
          <p class="title">上划市级收入</p>
          <p class="total-txt">当月完成数（万元）</p>
          <p class="detail-num">14231</p>
          <p class="total-txt">上年同期（万元）</p>
          <p class="detail-num">12568</p>
          <p class="total-txt">同比(+-)&nbsp;<span>13.23%</span></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import CommonLiquidChart from '@/components/common/common-liquidfill-chart.vue';
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonLineChart from "@/components/common/common-line-chart.vue";
  import CommonCyclichalfChart from "@/components/common/commom-cyclic-half-chart.vue";
  import CommonTable from "@/components/common/common-table.vue";

  export default {
    name: 'rightSubcontent',
    components: {
      CommonLiquidChart,
      CommonPieNewChart,
      CommonLineChart,
      CommonCyclichalfChart,
      CommonTable
    },
    data() {
      return {
        publicLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: "publicLiquid",
            color: "#3EA2FE",
            value:null
          },
          sumIncome:'',
          incRate:''
        },
        fundLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: " fundLiquid",
            color: "#6C43F7",
            value:null
          }
        },
        govLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: " govLiquid",
            color: "#EDA652",
            value:null
          }
        },
        socialLiquidConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: " socialLiquid",
            color: "#62FFFF",
            value:null
          }
        },
        incomePieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            title: '',
            id: 'incomePie',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7'],
            legend: {
              show: true,
              x: "center",
              y: "bottom",
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              padding: 15,
              data: ['一般公共预算收入', '政府性基金预算收入']
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [60, 110],
              center: ['50%', '40%'],
              label: {
                formatter: '{d}%',
                fontSize: 22
              },
              // x: '20%',               // for funnel
              // max: 40,                // for funnel
              data: [{
                  value: null,
                  name: '一般公共预算收入'
                },
                {
                  value: null,
                  name: '政府性基金预算收入'
                }
              ]
            }]
          }
        },
        incomeLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'incomeLine',
            yName:'(万)',
            yOffset: -5,
            x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            y: [{
              axis: {
                min: null,
                max: null
              },
              title: '一般公共预算收入',
              data: [],
              color: "#3EA2FE",
            }, {
              title: '政府性基金预算收入',
              data: [],
              color: "#6C43F7",
            }]
          }
        },
        govIncomeDetailConfig:{
          request: {
            url: "url",
            params: {}
          },
          option: {
            id:'govIncomeDetail',
            height: 380,
            tableColor: '#6BEEFF',
            tableHeader: [{
              prop: "name",
              title: "收入项目",
            }, {
              prop: "monthIncome",
              title: "本月收入(万)",
              width: '125px'
            }, {
              prop: "sumIncome",
              title: "累计收入(万)",
              width: '125px'
            }, {
              prop: "lastYearIncome",
              title: "去年同期收入(万)",
              width: '165px'
            }, {
              prop: "rate",
              title: "同比(%)",
              width: '95px'
            }],
            tableData: []
          }
        },
      }
    },
    mounted() {
      // this.$refs.centerCyclicHalf.initChart();
      // this.$refs.provinceCyclicHalf.initChart();
      // this.$refs.cityCyclicHalf.initChart();

      this.getIncomeTotal();
      this.getMonthTotal();
      this.getGovStructure();
    },
    methods: {
      getIncomeTotal() {
        this.$get(this.$api.getIncomeTotal).then(res => {
          if (res.code === 200) {
            this.publicLiquidConfig.sumIncome = res.data.publicIncome.sumIncome;
            this.publicLiquidConfig.incRate = res.data.publicIncome.incRate;
            this.publicLiquidConfig.option.value = (res.data.publicIncome.percent/100).toFixed(4);

            this.fundLiquidConfig.monthIncome = res.data.govIncome.monthIncome;
            this.fundLiquidConfig.sumIncome = res.data.govIncome.sumIncome;
            this.fundLiquidConfig.lastIncome = res.data.govIncome.lastIncome;
            this.fundLiquidConfig.rate = res.data.govIncome.rate;

            this.incomePieConfig.option.series[0].data[0].value = res.data.publicIncome.sumIncome;
            this.incomePieConfig.option.series[0].data[1].value = res.data.govIncome.sumIncome
            // this.govLiquidConfig.sumIncome = res.data[2].sumIncome;
            // this.govLiquidConfig.incRate = res.data[2].incRate;
            // this.govLiquidConfig.option.value = (res.data[2].percent/100).toFixed(4);

            // this.socialLiquidConfig.sumIncome = res.data[3].sumIncome;
            // this.socialLiquidConfig.incRate = res.data[3].incRate;
            // this.socialLiquidConfig.option.value = (res.data[3].percent/100).toFixed(4);

            // res.data.slice(0,2).forEach((item,index) => {
              
            // });


            this.$refs.publicLiquid.initChart();
            // this.$refs.fundLiquid.initChart();
            // this.$refs.govLiquid.initChart();
            // this.$refs.socialLiquid.initChart();

            this.$refs.incomePie.initChart();

          }
        })
      },
      getMonthTotal() {
        this.$get(this.$api.getMonthTotal).then(res => {

          let publicList = res.data.publicIncome.map(item => {
            return item.monthIncome;
          });
          let govList = res.data.govFund.map(item => {
            return item.monthIncome;
          });
          let capitalList = res.data.capital.map(item => {
            return item.monthIncome;
          });
          let social = res.data.social.map(item => {
            return item.monthIncome;
          });

          this.incomeLineConfig.option.y[0].data = publicList;
          this.incomeLineConfig.option.y[1].data = govList;
          // this.incomeLineConfig.option.y[2].data = capitalList;
          // this.incomeLineConfig.option.y[3].data = social;

          this.$refs.incomeLine.initChart();

        })
      },
      getGovStructure() {
        this.$get(this.$api.getGovStructure).then(res => {
          if (res.code === 200) {
            this.govIncomeDetailConfig.option.tableData = res.data;
          }
          this.$refs.govIncomeDetail.initTable();
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  .row-box {
    display: flex;
    justify-content: space-between;
  }

  .right-sub-content {
    width: 1240px;
    float: right;
  }

  .mini-card-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 620px;

    .mini-card-item {
      position: relative;
      flex: none;
      width: 610px;
      height: 235px;
      background: rgba(14, 44, 74, 0.3);
      margin-bottom: 20px;

      .title {
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: rgba(233, 244, 255, 1);
        padding: 20px 0 0 30px;
      }

      .title-block {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }
  }

  .m-card-body {
    display: flex;
    align-items: center;

    .chart-box {
      width: 115px;
      height: 115px;
      margin-left: 60px;
    }
    .card-desc {
      width: 88px;
      font-size:22px;
      margin: 0 82px 0 20px;
      font-family:Source Han Sans CN;
      font-weight:400;
    }
    .desc-box {
      flex: 1;
      margin-left: 80px;
      padding-top: 15px;

      .txt {
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(107, 238, 255, 1);
        margin-bottom: 20px;

        >span {
          color: #fff;
          margin-left: 15px;
        }
      }

      .num {
        font-size: 36px;
        font-family: Digitalism;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 38px;
        margin-bottom: 30px;
      }
    }
    .desc-box-pubilc-income.desc-box {
      margin-left: 20px;
    }
  }

  .mini-card-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: url("../../../assets/imgs/card-bottom.png") no-repeat;
    background-size: 100%;
  }

  .card-item {
    margin-bottom: 20px;
  }

  .card-title {
    margin-left: 17px;
  }

  .card-main {
    height: 436px;
    padding: 20px;
    box-sizing: border-box;
  }

  .income-box {
    width: 1240px;
    background: rgba(14, 44, 74, 0.3);
    position: relative;
    float: none;

    .income-main {
      height: 348px;
      padding: 20px;
      box-sizing: border-box;
    }
  }

  .income-detail-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 610px;
    height: 427px;
    background: rgba(14, 44, 74, 0.3);

    .detail-box {
      flex: 1;
      text-align: center;

      .title {
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: rgba(234, 244, 255, 1);
        margin: 40px auto 0;
      }

      .total-txt {
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(107, 238, 255, 1);
        line-height: 38px;
        margin-top: 30px;
        >span {
          font-size: 20px;
          color: #fff;;
        }
      }

      .detail-num {
        font-size: 36px;
        font-family: Digitalism;
        font-weight: 400;
        color: rgba(246, 206, 18, 1);
        margin-top: 30px;
      }
    }
  }

</style>
